<template>
	<div class="wrap">
		<el-row>
			<el-col :span="2">
				<div class="grid-content cursorPoiner back">
					<i class="el-icon-back"></i>
					返回
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="3">
				<div class="grid-content finaceCheck-title-left">
					财务质检
				</div>
			</el-col>
			<el-col :span="3" :offset='18'>
				<div class="grid-content finaceCheck-title-right cursorPoiner">
					财务切表
				</div>
			</el-col>
		</el-row>
		<el-row>
			<div class="mode mode2">
				<el-col :span="2">
					<div class="grid-content file-name">
						文件名称：
					</div>
				</el-col>
				<el-col :span="3">
					<div class="grid-content file-name-detail">
						犀语科技申报表
					</div>
				</el-col>
				<el-col :span="2" :offset='15'>
					<div class="grid-content blue-font cursorPoiner" style="text-align: right;">
						生成报告
					</div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content blue-font cursorPoiner">
						刷新结果
					</div>
				</el-col>
			</div>
		</el-row>
		<el-row>
			<div class="mode mode3">
				<checkboxs :checkboxData='this.checkboxs1' @handleClick='checkboxsClick1'></checkboxs>
				<checkboxs :checkboxData='this.checkboxs2' @handleClick='checkboxsClick2'></checkboxs>
				<checkboxs :checkboxData='this.checkboxs3' @handleClick='checkboxsClick3'></checkboxs>
				<checkboxs :checkboxData='this.checkboxs4' @handleClick='checkboxsClick4'></checkboxs>
			</div>
		</el-row>
		<el-row>
			<div class="mode mode4">
				<el-row>
					<el-col :span="3">
						<div class="mode4-title mode4-left">
							校验具体指
						</div>
					</el-col>
					<el-col :span="1.5" :offset='16'>
						<div class="mode4-title mode4-norm">
							· 标准问题
						</div>
					</el-col>
					<el-col :span="1.5">
						<div class="mode4-title mode4-table">
							· 表内勾稽
						</div>
					</el-col>
					<el-col :span="1">
						<div class="mode4-title blue-font mode4-deal cursorPoiner">
							处理
						</div>
					</el-col>
					<el-col :span="1">
						<div class="mode4-title blue-font mode4-ignore cursorPoiner">
							忽略
						</div>
					</el-col>
				</el-row>
				<el-row class="relation">
					<el-col>
						勾稽关系：其他应收账款
						<span>≠</span>应收款明细小项
					</el-col>
				</el-row>
				<el-row>
					<shouldCredit :tableData='this.tableData' @changeMoney='changeMoney'></shouldCredit>
				</el-row>
			</div>
		</el-row>
		<el-row>
			<div class="mode mode5">
				<el-row>
					<el-col :span="3">
						<div class="mode4-title mode4-left">
							应收账款
						</div>
					</el-col>
					<el-col :span="1.5" :offset='16'>
						<div class="mode4-title mode4-norm">
							· 标准问题
						</div>
					</el-col>
					<el-col :span="1.5">
						<div class="mode4-title mode4-table">
							· 表内勾稽
						</div>
					</el-col>
					<el-col :span="1">
						<div class="mode4-title blue-font mode4-deal cursorPoiner">
							处理
						</div>
					</el-col>
					<el-col :span="1">
						<div class="mode4-title blue-font mode4-ignore cursorPoiner">
							忽略
						</div>
					</el-col>
				</el-row>
				<el-row class="relation">
					<el-col>
						勾稽关系：其他应收账款 ≠应收款明细小项
					</el-col>
				</el-row>
			</div>
		</el-row>
		<dilog :is-show="isShowErrDialog" @on-close="hideErrDialog">
			<!-- 插槽传进入的内容 -->
			<el-row class="shadow-box">
				<div class="x-top">
					<div class="x-box">
						<p class="dialog-close" @click="hideErrDialog">x</p>
					</div>
					<div class="change-data-content">
						更新数据内容
					</div>
					<div class="x-common-row">
						<div class="x-left">指标名称</div>
						<div class="x-middle">两年以上</div>
						<div class="x-right"></div>
					</div>
					<div class="x-common-row">
						<div class="x-left">报告期</div>
						<div class="x-middle">2017-12-31</div>
						<div class="x-right"></div>
					</div>
					<div class="x-common-row">
						<div class="x-left">原值</div>
						<div class="x-middle">
							<span class="x-blue">{{changeTable.tableLastData.money}}</span>
						</div>
						<div class="x-right">（单位：万元）</div>
					</div>
					<div class="x-common-row">
						<div class="x-left">修改值</div>
						<div class="x-middle">
							<input v-model="changeTable.dislogNewMoney" type="text" value="" placeholder="请输入修改值" />
						</div>
						<div class="x-right">（单位：万元）</div>
					</div>
				</div>
				<div class="x-bottom">
					<div class="x-button" @click="updateTableData">提交</div>
				</div>
			</el-row>
		</dilog>
	</div>
</template>

<script>
import checkboxs from '../component/checkboxs.vue'
import shouldCredit from '../component/shouldCredit.vue'
import dilog from '../component/dialog.vue'
import { mapState } from 'vuex'
export default {
  name: 'finaceCheck',
  data () {
    return {
      isShowErrDialog: false,
      changeTable: {
        tableLastData: '',
        dislogNewMoney: ''
      },
      checkboxs1: {
        name: '错误类型',
        checkAll: false,
        checkedCities: ['标准问题'],
        cities: ['标准问题', '存疑问题'],
        isIndeterminate: true
      },
      checkboxs2: {
        name: '勾稽类型',
        checkAll: false,
        checkedCities: ['表内勾稽', '文表勾稽'],
        cities: ['表内勾稽', '跨表勾稽', '文表勾稽'],
        isIndeterminate: true
      },
      checkboxs3: {
        name: '表格类型',
        checkAll: false,
        checkedCities: ['利润表', '财务附注'],
        cities: ['利润表', '资产负债表', '现金流量表', '财务附注'],
        isIndeterminate: true
      },
      checkboxs4: {
        name: '批注类型',
        checkAll: false,
        checkedCities: ['已处理', '已忽略'],
        cities: ['未标注', '已处理', '已忽略'],
        isIndeterminate: true
      },
      tableData: [{
        project: '一年至两年（单位万元）',
        money: '186.78',
        lastMoney: '——'
      }, {
        project: '两年以上（单位万元）',
        money: '67.49',
        lastMoney: '——'
      }, {
        project: '其他应收账款（单位万元）',
        money: '935.52',
        lastMoney: '——'
      }]
    }
  },
  components: {
    checkboxs,
    shouldCredit,
    dilog
  },
  methods: {
    checkboxsClick1 (value) {
      console.log(value)
    },
    checkboxsClick2 (value) {
      console.log(value)
    },
    checkboxsClick3 (value) {
      console.log(value)
    },
    checkboxsClick4 (value) {
      console.log(value)
    },
    changeMoney (value, index) {
      this.changeTable.tableLastData = value
      this.isShowErrDialog = true
    },
    hideErrDialog () {
      this.isShowErrDialog = false
      this.changeTable.dislogNewMoney = ''
    },
    updateTableData () {
      this.isShowErrDialog = false
      if (this.changeTable.dislogNewMoney) {
        this.changeTable.tableLastData.money = this.changeTable.dislogNewMoney
        this.changeTable.dislogNewMoney = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped="" type="text/css">
	
</style>
